<div class="migrate-ravendb-database">
    <div class="panel padding padding-md" data-bind="visible: $root.activeDatabase().isSharded()">
        <div>
            <div class="empty-set text-center margin-top-sm margin-bottom-sm mx-auto">
                <i class="icon-disabled text-warning icon-xl m-0"></i>
                <div class="lead">
                    <div class="vstack gap-3">
                        <span>
                            <div class="rounded-pill badge bg-faded-warning">
                                Feature not available
                            </div>
                        </span>
                        <span>
                            Migrate data from another RavenDB Server is not available for
                            <i class="icon-sharding text-shard m-0"></i> sharded databases
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel" data-bind="visible: !$root.activeDatabase().isSharded()">
        <div class="panel-body">
            <form class="flex-form" data-bind="submit: migrateDb" autocomplete="off">
                <div class="row">
                    <div class="col-sm-9 col-lg-7 col-xl-6">
                        <h3>Migrate data from another RavenDB Server</h3>
                        <div class="bg-warning text-warning padding padding-xs margin-top margin-bottom">
                            <small><i class="icon-warning"></i><span>Note: Migration will overwrite any existing documents and indexes.</span></small>
                        </div>
                    </div>
                </div>
                <div class="row" data-bind="with: model">
                    <div class="col-sm-8 col-lg-6 margin-top">
                        <div class="form-group" data-bind="validationElement: serverUrl">
                            <label class="control-label">Server URL</label>
                            <div class="flex-grow">
                                <div class="flex-grow">
                                    <div class="dropdown btn-block">
                                        <input type="text" class="form-control dropdown-toggle" data-toggle="dropdown"
                                               id="server-url"
                                               data-bind="textInput: serverUrl"
                                               placeholder="Source server url" />
                                        <ul class="dropdown-menu" data-bind="foreach: createServerUrlAutoCompleter(), autoComplete: '#server-url'">
                                            <li data-bind="click: $parent.selectServerUrl.bind($parent, $data)">
                                                <a href="#" data-bind="text: $data"></a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div class="form-group" data-bind="visible: isSecuredConnection">
                                <label class="control-label"></label>
                                <div class="toggle">
                                    <input class="styled" type="checkbox" id="skip-server-certificate-validation" data-bind="checked: skipServerCertificateValidation" />
                                    <label for="skip-server-certificate-validation">Skip Server Certificate Validation</label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group" data-bind="validationElement: serverMajorVersion">
                            <label class="control-label">Server Version</label>
                            <div class="flex-grow">
                                <div class="form-control-static">
                                    <div data-bind="text: serverMajorVersionNumber, visible: !$root.spinners.versionDetect() && serverMajorVersionNumber()"></div>
                                    <div data-bind="visible: $root.spinners.versionDetect">
                                        <i class="global-spinner spinner-sm"></i>
                                    </div>
                                </div>
                                <div>
                                    <div class="help-block" data-bind="validationMessage: serverMajorVersion"></div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group" data-bind="visible: hasRavenFs">
                            <label class="control-label">Resource type</label>
                            <div class="flex-grow" data-bind="validationElement: authenticationMethod">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-default"
                                            data-bind="click: _.partial(importRavenFs, false), css: { active: !importRavenFs() }">
                                        Database
                                    </button>
                                    <button type="button" class="btn btn-default"
                                            data-bind="click: _.partial(importRavenFs, true), css: { active: importRavenFs }">
                                        RavenFS
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="form-group" data-bind="validationElement: resourceName">
                            <label class="control-label"><span data-bind="text: resourceTypeName"></span> name</label>
                            <div class="flex-grow">
                                <div class="dropdown btn-block">
                                    <input type="text"
                                           class="form-control dropdown-toggle"
                                           data-toggle="dropdown"
                                           id="resource-name"
                                           data-bind="textInput: resourceName, attr: { 'placeholder': 'Source ' + resourceTypeName().toLowerCase() + ' name' }" />
                                    <ul class="dropdown-menu" data-bind="foreach: createResourceNamesAutoCompleter(), autoComplete: '#resource-name'">
                                        <li data-bind="click: $parent.selectResourceName.bind($parent, $data)">
                                            <a href="#" data-bind="text: $data"></a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div data-bind="visible: isLegacy">
                            <div class="form-group">
                                <label class="control-label">Authentication method</label>
                                <div class="flex-grow" data-bind="validationElement: authenticationMethod">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default"
                                                data-bind="click: _.partial(authenticationMethod, 'none'), css: { active: authenticationMethod() === 'none' }">
                                            None
                                        </button>
                                        <button type="button" class="btn btn-default"
                                                data-bind="click: _.partial(authenticationMethod, 'apiKey'), css: { active: authenticationMethod() === 'apiKey' }">
                                            API Key
                                        </button>
                                        <button type="button" class="btn btn-default"
                                                data-bind="click: _.partial(authenticationMethod, 'windows'), css: { active: authenticationMethod() === 'windows' }">
                                            Windows Credentials
                                        </button>
                                    </div>
                                    <span data-bind="visible: $root.spinners.getResourceNames">
                                        <i class="global-spinner spinner-sm"></i>
                                    </span>
                                </div>
                            </div>
                            <div data-bind="visible: showWindowsCredentialInputs, if: showWindowsCredentialInputs">
                                <div class="form-group" data-bind="validationElement: userName">
                                    <label class="control-label">User name</label>
                                    <div class="flex-grow">
                                        <input data-bind="textInput: userName" type="text" class="form-control" placeholder="User name" />
                                    </div>
                                </div>
                                <div class="form-group" data-bind="validationElement: password">
                                    <label class="control-label">Password</label>
                                    <div class="flex-grow">
                                        <input data-bind="textInput: password" type="password" class="form-control" placeholder="Password" />
                                    </div>
                                </div>
                                <div class="form-group" data-bind="validationElement: domain">
                                    <label class="control-label">Domain</label>
                                    <div class="flex-grow">
                                        <input data-bind="textInput: domain" type="text" class="form-control" placeholder="Domain" />
                                    </div>
                                </div>
                            </div>
                            <div data-bind="visible: showApiKeyCredentialInputs, if: showApiKeyCredentialInputs">
                                <div class="form-group" data-bind="validationElement: apiKey">
                                    <label class="control-label">API Key</label>
                                    <div class="flex-grow">
                                        <input data-bind="textInput: apiKey" type="password" class="form-control" placeholder="API Key" />
                                    </div>
                                </div>

                                <div class="form-group" data-bind="visible: isUnsecuredBasicAuthentication">
                                    <label class="control-label"></label>
                                    <div class="toggle">
                                        <input class="styled" type="checkbox" id="basic-authentication" data-bind="checked: enableBasicAuthenticationOverUnsecuredHttp" />
                                        <label for="basic-authentication">Enable Basic Authentication Over Unsecured Http</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div data-bind="with: model" style="margin-left: 160px">
                    <div data-bind="visible: isRavenDb() && !ravenFsImport()">
                        <div class="row">
                            <div class="col-lg-3">
                                <div class="toggle">
                                    <input id="migrate_documents" type="checkbox" data-bind="checked: includeDocuments" />
                                    <label for="migrate_documents">Include Documents</label>
                                </div>
                                <div class="margin-left">
                                    <div class="toggle" data-bind="visible: isLegacy">
                                        <input id="migrate_legacy_attachments" type="checkbox" data-bind="checked: includeLegacyAttachments" />
                                        <label for="migrate_legacy_attachments">Include Legacy Attachments</label>
                                    </div>
                                    <div class="toggle" data-bind="visible: !isLegacy()">
                                        <input id="migrate_attachments" type="checkbox" data-bind="checked: includeAttachments" />
                                        <label for="migrate_attachments">Include Attachments</label>
                                    </div>
                                    <div class="toggle" data-bind="visible: isV42orAbove">
                                        <input id="migrate_counters" type="checkbox" data-bind="checked: includeCounters" />
                                        <label for="migrate_counters">Include Counters</label>
                                    </div>
                                    <div class="toggle" data-bind="visible: isV50orAbove">
                                        <input id="migrate_time_series" type="checkbox" data-bind="checked: includeTimeSeries" />
                                        <label for="migrate_time_series">Include Time Series</label>
                                    </div>
                                    <div class="toggle" data-toggle="tooltip" data-placement="top">
                                        <input id="migrate_revisions" type="checkbox" data-bind="checked: includeRevisionDocuments" />
                                        <label for="migrate_revisions">Include Revisions</label>
                                    </div>
                                    <div class="toggle" data-bind="visible: !isLegacy()">
                                        <input id="migrate_conflicts" type="checkbox" data-bind="checked: includeConflicts" />
                                        <label for="migrate_conflicts">Include Conflicts</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-5">
                                <div class="toggle">
                                    <input id="migrate_indexes" type="checkbox" data-bind="checked: includeIndexes" />
                                    <label for="migrate_indexes">Include Indexes</label>
                                </div>
                                <div class="margin-left">
                                    <div class="toggle">
                                        <input id="toggleIndexHistory" type="checkbox"
                                               data-bind="checked: databaseModel.includeIndexHistory, enable: includeIndexes" />
                                        <label for="toggleIndexHistory">Include Index History</label>
                                    </div>
                                    <div class="toggle">
                                        <input id="migrate_remove_analyzers" type="checkbox"
                                               data-bind="checked: removeAnalyzers, enable: includeIndexes" />
                                        <label for="migrate_remove_analyzers">Remove Analyzers</label>
                                    </div>
                                </div>
                                <div class="toggle" data-bind="visible: !isLegacy()">
                                    <input id="migrate_identities" type="checkbox" data-bind="checked: includeIdentities" />
                                    <label for="migrate_identities">Include Identities</label>
                                </div>
                                <div class="toggle" data-bind="visible: !isLegacy()">
                                    <input id="migrate_cmp_xch" type="checkbox" data-bind="checked: includeCompareExchange" />
                                    <label for="migrate_cmp_xch">Include Compare Exchange</label>
                                </div>
                                <div class="toggle">
                                    <input id="migrate_Subscriptions" type="checkbox" data-bind="checked: includeSubscriptions" />
                                    <label for="migrate_Subscriptions" class="margin-right margin-right-sm">Include Subscriptions</label>
                                </div>
                                <div class="flex-horizontal" data-bind="visible: !isLegacy()">
                                    <div class="toggle">
                                        <input id="migrate_Configuration" type="checkbox" data-bind="checked: includeDatabaseRecord" />
                                        <label for="migrate_Configuration" class="margin-right margin-right-sm">Include Configuration and Ongoing Tasks</label>
                                    </div>
                                    <button class="btn btn-sm margin-right margin-right-sm" data-bind="enable: includeDatabaseRecord, click: $root.customizeConfigurationClicked">Customize</button>
                                    <small id="js-ongoing-tasks-disabled"><i class="icon-info text-info"></i></small>
                                </div>
                            </div>
                        </div>
                        <div data-bind="validationElement: importDefinitionHasIncludes">
                            <div class="help-block" data-bind="validationMessage: importDefinitionHasIncludes"></div>
                        </div>
                    </div>
                </div>
                <div data-bind="collapse: showAdvancedOptions">
                    <hr />
                    <h3>Advanced</h3>
                    <div class="margin-left">
                        <div data-bind="with: model">
                            <div data-bind="visible: enableAdvanced">
                                <div class="form-group">
                                    <div class="toggle">
                                        <input class="styled" type="checkbox" id="use-transform-script" data-bind="checked: showTransformScript">
                                        <label for="use-transform-script" class="margin-right margin-right-sm">Use Transform script</label>
                                        <small id="scriptPopover"><i class="icon-info text-info"></i></small>
                                    </div>
                                </div>
                                <div class="flex-grow" data-bind="collapse: showTransformScript">
                                <pre class="form-control editor query-source" style="height: 200px;"
                                     data-bind="aceEditor: { code: transformScript, allowResize: false, lang:'ace/mode/javascript' }">
                                </pre>
                                </div>
                            </div>
                            <div data-bind="with: databaseModel, visible: enableAdvanced">
                                <div data-bind="compose: $root.smugglerDatabaseRecordView"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <hr />
                <span class="has-disable-reason" data-placement="bottom"
                      data-bind="attr: { 'data-original-title': model.enableAdvanced() ? '': 'Advanced section is available once you enter a valid RavenDB Server URL' }">
                    <button class="btn btn-default" type="button"
                            data-bind="click: showAdvancedOptions.toggle.bind(showAdvancedOptions), enable: model.enableAdvanced()">
                        Advanced
                    </button>
                </span>
                <button class="btn btn-primary" type="submit" data-bind="css: { 'btn-spinner': spinners.migration() }, disable: spinners.migration">
                    <span class="icon-import"></span> <span>Migrate Database</span>
                </button>
            </form>
        </div>
    </div>
</div>
